<!-- 历史记录 -->
<template>
	<view class="wrap">
		<u-navbar :title="type==1?'历史记录搜索':'我的收藏搜索'" left-icon-color="#ffffff" bg-color="#ffffff00" titleStyle="color:white" :autoBack="false"  @leftClick="toHomeFun"></u-navbar>
		<view class="bg-img">
			<image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/seach-1.png" mode="widthFix"></image>
		</view>
		<view class="seach-box" :style="'margin-top:'+statusBarHeight1+'px'">
			<view class="input">
				<input placeholder="请输入搜索内容" v-model="value"/>
			</view>
			<view class="btn" @click="seachFun">搜索</view>
		</view>
		<view class="content"  :style="'height:calc(100vh - '+statusBarHeight+'px)'">
			<block v-if="dataList.length">
				<view class="list" v-for="(item,index) in dataList" :key="index" @click="toInfoFun(item)">
					<view class="list_left">
						<view class="list_left_img">
							<image :src="item.data_image" mode="aspectFill"></image>
						</view>
						<view class="list_left_info">
							<view class="list_left_title line1">
								{{item.name}}
							</view>
							<!-- <view class="list_left_time">
								<view class="list_left_time_text line1">
									条码编号：{{item.gcode}}
								</view>
							</view> -->
						</view>
					</view>
					<view class="list_right" v-if="item.grade">
						<view class="list_right_text" >
							<view class="list_right_spot">
								<image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/details-5.png"></image>
							</view>
							<view class="list_right_rank" :class="item.grade=='B'?'b_color':item.grade=='B-'?'b1_color':item.grade=='A'?'a_color':item.grade=='C'?'c_color':item.grade=='D'?'d_color':''">
								{{item.grade || '暂无等'}}级
							</view>
						</view>
					</view>
				</view>
			</block>
			<view  v-else style="text-align: center;padding: 50rpx 0;">
				暂无数据
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getGoodsDetail,getGoodsList,favoriteList,historyList} from '@/api/api'
	export default {
		data() {
			return {
				navBarHeight:'',
				query: {
					page: 1,
					limit: 100
				},
				dataList: [],
				bottomMain: false,
				value:'',
				type:1,
				statusBarHeight:0,
				statusBarHeight1:0,
			};
		},
		onLoad(opition) {
			const that = this;
			uni.getSystemInfo({
				success(res) {
					that.statusBarHeight1 = res.statusBarHeight+45;
					that.statusBarHeight = res.statusBarHeight + 105;
				}
			});
			if(opition.type){
				this.type = opition.type
			}
		},
		onShow(){
			this.query = {
				page: 1,
				limit: 100
			}
			this.bottomMain = false
			this.dataList = []
			this.getListFun();
		},
		onReachBottom() {
			if (!this.bottomMain) {
				this.query.page += 1;
				this.getListFun();
			}
		},
		methods: {
			toHomeFun(){
				uni.navigateBack()
			},
			setGradeFun(value){
				if(value > 50){
					if(value > 70){
						if(value > 85){
							return 'A'
						}else{
							return 'B'
						}
					}else{
						return 'C'
					}
				}else{
					return 'D'
				}
			},
			toInfoFun(item){
				if(!this.show){
					uni.showLoading({
						title: '获取中'
					})
					getGoodsDetail({
						gcode:item.gcode
					}).then((res)=>{
						uni.hideLoading();
						const { data } = res
						let calorie_num = parseFloat(data.info.calorie_num)
						let sugar_num = parseFloat(data.info.sugar_num)
						data.stage_list.calorie.forEach((item,index)=>{
							if(calorie_num >item){
								if(index == data.stage_list.calorie.length - 1 || calorie_num <= data.stage_list.calorie[index+1]){
									console.log(item)
									data.info.calorie_index = index+1
								}
							}
						})
						data.stage_list.sugar.forEach((item,index)=>{
							if(sugar_num >item){
								if(index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list.sugar[index+1]){
									data.info.sugar_index = index+1
								}
							}
						})
						uni.setStorageSync('RetData',data)
						return uni.navigateTo({
							url:"/pages/scans/ScanResult"
						})
					}).catch((e) => {
						uni.hideLoading();
						uni.$u.toast(typeof  e ===  'string'?e:'请检查网络连接');
					})
				}
			},
			seachFun(){
				this.query = {
					page: 1,
					limit: 100
				}
				this.bottomMain = false
				this.dataList = []
				this.getListFun();
			},
			getListFun() {
				const that = this
				uni.showLoading({
					title: '获取中'
				});
				let fun = historyList
				if(this.type == 2){
					fun = favoriteList
				}
				fun({
					page: this.query.page,
					limit:this.query.limit,
					title:this.value
				}).then((res) => {
					uni.hideLoading();
					if (that.query.page == 1) {
						that.dataList = res.data;
					} else {
						that.dataList.push(...res.data);
					}
					if (res.data.length != 100) {
						that.bottomMain = true
					}
				}).catch((e)=>{
					uni.hideLoading();
					uni.$u.toast(typeof  e ===  'string'?e:'请检查网络连接');
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line1{
		white-space: nowrap;
		overflow: hidden;//文本超出隐藏
		text-overflow: ellipsis;//文本超出省略号替代
	}
	.d_color {
		color: #ee3a3a !important;
	}
	
	.d_bg {
		background: #ee3a3a !important;
	}
	
	.d_border {
		border: 1rpx solid #ee3a3a;
	}
	
	
	.c_color {
		color: #FEC817 !important;
	}
	
	.c_bg {
		background: #FEC817 !important;
	}
	
	.c_border {
		border: 1rpx solid #FEC817 !important;
	}
	
	.b1_color {
		color: #6AA300 !important;
	}
	
	.b1_bg {
		background: #6AA300 !important;
	}
	
	.b1_border {
		border: 1rpx solid #6AA300 !important;
	}
	
	.b_color {
		color: #00CC70 !important;
	}
	
	.b_bg {
		background: #00CC70 !important;
	}
	
	.b_border {
		border: 1rpx solid #00CC70 !important;
	}
	
	.a_color {
		color: #30C285 !important;
	}
	
	.a_bg {
		background: #30C285 !important;
	}
	
	.a_border {
		border: 1rpx solid #30C285 !important;
	}
	.wrap{
		width: 750rpx;
		background: #f6f7fb;
		position: relative;
		overflow: hidden;
		min-height:100vh;
		.bg-img{
			width: 100%;
			position: fixed;
			z-index: 0;
			top: 0;
			left: 0;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			width: 750rpx;
			background: #f6f7fb;
			padding: 30rpx 0 40rpx;
			border-radius: 30rpx;
			position: relative;
			z-index: 2;
			box-sizing: border-box;
			overflow: auto;
			.list{
				margin: 0 20rpx 16rpx;
				width: 660rpx;
				background: #ffffff;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 34rpx 30rpx 16rpx;
				.list_left{
					display: flex;
					align-items: center;
					.list_left_img{
						width: 131rpx;
						height: 131rpx;
						border-radius: 10rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.list_left_info{
						margin-left: 22rpx;
						width: 360rpx;
						.list_left_title{
							font-size: 34rpx;
							font-weight: bold;
							color: #434242;
						}
						.list_left_time{
							margin-top: 32rpx;
							.list_left_time_text{
								font-size: 24rpx;
								color: #434242;
							}
						}
					}
				}
				.list_right{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.list_right_num{
						font-size: 40rpx;
						font-family: DIN, DIN-Bold;
						font-weight: 700;
						text-align: left;
						color: #ee3a3a;
						margin-bottom: 10rpx;
					}
					.list_right_text{
						margin-top: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.list_right_spot{
							width: 28rpx;
							height: 28rpx;
							background: #afafaf;
							border-radius: 50%;
							line-height: 40rpx;
							text-align: center;
							font-size: 22rpx;
							color: white;
							position: relative;
							image{
								width: 20rpx;
								height: 24rpx;
								position: absolute;
								left: calc(50% - 10rpx);
								top: calc(50% - 12rpx);
							}
						}
						.list_right_rank{
							margin-left: 10rpx;
							font-size: 36rpx;
							font-weight: 700;
							color: #737373;
							width: 84rpx;
							text-align: left;
						}
					}
					.del{
						width: 40rpx;
						height: 40rpx;
						margin-top: 30rpx;
						image{
							width: 100%;
							height: 100%;
							display: inline-block;
							vertical-align: top;
						}
					}
				}
			}
		}
		
	}
	.seach-box{
		line-height: 60rpx;
		width: 700rpx;
		margin: 0rpx auto;
		overflow: hidden;
		position: relative;
		z-index: 2;
		padding: 20rpx 0 40rpx 0;
		.input{
			width: 550rpx;
			color: #070707;
			font-size: 24rpx;
			font-weight: 500;
			display: inline-block;
			vertical-align: top;
			border-radius: 8rpx;
			padding: 0 20rpx;
			background-color: white;
			box-sizing: border-box;
			input{
				height: 60rpx;
				font-size: 28rpx;
			}
		}
		.btn{
			width: 130rpx;
			float: right;
			display: inline-block;
			vertical-align: top;
			background-color: white;
			border-radius: 8rpx;
			text-align: center;
			color: #0FA3A6;
			font-weight: 700;
			font-size: 26rpx;
		}
	}
</style>
